layui.use(['table','form','element'], function(){
    var table = layui.table;
    var form = layui.form;
    var element = layui.element;
    var layer = layui.layer;

    var $ = layui.$;
    //控制table工具栏按钮权限
    $.ajax({
        url: serverUrl + '/btn/html',
        data: {modulePath: '/sys/user'},
        dataType: 'json',
        success: function (result) {
            $("#barDemo").html(result.data);
        },
        error: function (xhr) {
            layer.msg('error');
        }
    })

    //第一个实例
    table.render({
        elem: '#demo'
        ,url: serverUrl + '/sys/user/list' //数据接口
        ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
            layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
            ,curr: 1 //设定初始在第 1 页
            ,groups: 1 //只显示 1 个连续页码
            ,first: false //不显示首页
            ,last: false //不显示尾页
        }
        ,limits: [5,10,20]  //每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。
        ,limit: 5 //每页默认显示的数量
        ,cols: [[ //表头
            {field: 'id', title: 'ID', width:180, sort: true, fixed: 'left'}
            ,{field: 'username', title: '用户名', width:180}
            ,{field: 'enabled', title: '启用', width:180, templet:function (d) {
                    return d.enabled==1?'正常':'已禁用';
                }}
            ,{field: 'locked', title: '锁定', width:180, templet:function (d) {
                    return d.locked==0?'正常':'已锁定';
                }}
            ,{fixed: 'right', title: '操作', width:220, align:'center', toolbar: '#barDemo'}
        ]]
        ,response:{
            statusName:'code', //规定返回的状态码字段为code
            statusCode:'200' //规定成功的状态码味200
        }
        ,parseData: function(res){ //res 即为原始返回的数据
            console.log(res.data);
            return {
                "code": res.code, //解析接口状态
                "msg": res.msg, //解析提示文本
                "count": res.data.total, //解析数据长度
                "data": res.data.list //解析数据列表
            };
        }
    });

    //监听表格复选框选择
    table.on('checkbox(demo)', function(obj){
        console.log(obj)
    });
    //监听工具条
    table.on('tool(demo)', function(obj){
        var data = obj.data;
        if(obj.event === 'detail'){
            // layer.msg('ID：'+ data.id + ' 的查看操作');
            $.ajax({
                url: serverUrl +"/sys/user/get",
                dataType: 'json',
                data: {id: data.id},
                success: function (result) {
                    $("#id").html(result.data.id);
                    $("#username").html(result.data.username);
                    $("#enabled").html(result.data.enabled?'正常':'禁用');
                    $("#locked").html(result.data.locked?'锁定':'正常');
                },
                error: function (xhr) {
                    layer.msg('error');
                },
                complete(xhr,status) {
                    layer.open({
                        type: 1
                        ,title: '用户详情'
                        ,area: ['500px', '300px']
                        ,content: $("#user-info")
                        ,btn: ['确定', '取消']
                        ,yes: function(index, layero){
                            layer.close(index); //如果设定了yes回调，需进行手工关闭
                        }
                        ,btn2: function(index, layero){
                            //按钮【按钮二】的回调
                            layer.close(index); //如果设定了yes回调，需进行手工关闭
                            //return false 开启该代码可禁止点击该按钮关闭
                        }
                    })
                }
            })
        } else if(obj.event === 'del'){
            layer.confirm('真的删除行么', function(index){
                obj.del();
                layer.close(index);
                $.ajax({
                    url: serverUrl + "/sys/user/del?id=" + data.id,
                    dataType: 'json',
                    success: function (result) {
                      //location.reload();
                        table.reload('demo');
                    },
                    error: function () {
                        layer.msg('删除失败');
                    }
                })
            });
        } else if(obj.event === 'edit'){
            //layer.alert('编辑行：<br>'+ JSON.stringify(data))
            $.ajax({
                url: serverUrl + '/sys/user/get',
                data: {id: data.id},
                dataType: 'json',
                success: function (result) {
                    form.val('formUpdate',{
                       'username': result.data.username,
                       'id':result.data.id,
                       'enabled': result.data.enabled,
                       'locked': result.data.locked
                    });
                    layer.open({
                        type: 1
                        ,title: '修改用户'
                        ,area: ['500px', '350px']
                        ,content: $("#user-info-update")
                        ,btn: ['确定', '取消']
                        ,yes: function(index, layero){
                            var formData = {
                                id: $(layero).find("[name=id]").val(),
                                username: $(layero).find("[name=username]").val(),
                                enabled: $(layero).find("[name=enabled]:checked").val(),
                                locked: $(layero).find("[name=locked]:checked").val()
                            }
                            if(!formData.enabled) {formData.enabled = "0"}
                            $.ajax({
                                url: serverUrl + "/sys/user/update",
                                data: formData,
                                type: 'post',
                                dataType: 'json',
                                success: function (result) {
                                    location.reload();
                                },
                                error: function (xhr) {
                                    layer.msg('error');
                                }
                            })
                            layer.close(index); //如果设定了yes回调，需进行手工关闭
                        }
                        ,btn2: function(index, layero){
                            //按钮【按钮二】的回调
                            layer.close(index); //如果设定了yes回调，需进行手工关闭
                            //return false 开启该代码可禁止点击该按钮关闭
                        }
                    })
                },
                error: function (xhr) {
                    layer.msg('error');
                }
            })
        }
    });

    var $ = layui.$, active = {
        getCheckData: function(){ //获取选中数据
            var checkStatus = table.checkStatus('idTest')
                ,data = checkStatus.data;
            layer.alert(JSON.stringify(data));
        }
        ,getCheckLength: function(){ //获取选中数目
            var checkStatus = table.checkStatus('idTest')
                ,data = checkStatus.data;
            layer.msg('选中了：'+ data.length + ' 个');
        }
        ,isAll: function(){ //验证是否全选
            var checkStatus = table.checkStatus('idTest');
            layer.msg(checkStatus.isAll ? '全选': '未全选')
        }
    };

    $('.demoTable .layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
});
